<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
	  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>订单详情</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<div th:include="css :: css"></div>
<!-- //animation-effect -->
</head>
	
<body>
<!-- header -->
<div th:include="/header :: header" ></div>
<!-- //header -->
<!-- breadcrumbs -->
	<div class="breadcrumbs">
		<div class="container">
			<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
				<li><a href="/index"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>主页</a></li>
				<li class="active">订单详情</li>
			</ol>
		</div>
	</div>
<!-- //breadcrumbs -->
<!-- login -->
	<div class="" id="app">
		<div class="container">
			<h2 class="typoh2 animated wow fadeInUp animated" data-wow-duration="1000ms" data-wow-delay="500ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 500ms; animation-name: fadeInUp;">订单详情</h2>
			<p class="animated wow fadeInUp animated" data-wow-duration="1000ms" data-wow-delay="500ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 500ms; animation-name: fadeInUp;">订单编号：{{order.id}}</p>
			<div class="bs-docs-example animated wow fadeInUp animated" data-wow-duration="1000ms" data-wow-delay="500ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 500ms; animation-name: fadeInUp;">
				<table class="table">
					<thead>
						<tr>
							<th>商品名称</th>
							<th>商品图</th>
							<th>金额</th>
							<th>商品状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in order.orderItems">
							<td>{{item.goods.name}}</td>
							<td><img  v-bind:src="item.goods.prc" class="img-responsive" width="100px" alt=""></td>
							<td>{{item.price}}元</td>
							<td>
								<span  v-if="item.refund==0">支付成功 </span>
								<span  v-if="item.refund==1">退款中 </span>
								<span  v-if="item.refund==2">退款成功 </span>
								<span  v-if="item.refund==3">商家拒绝退款 </span>
								</td>
							<td><a  v-on:click="tui(item.id)"  v-if="item.refund==0"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>退款</a></td>
						</tr>
					</tbody>
				</table>


			</div>

			<div class="checkout-left">	
				<div class="checkout-left-basket animated wow slideInLeft animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: slideInLeft;">
					<br>
					<h4>订单信息</h4>
					<ul>
						<li>支付状态 <i>-</i> <span>{{order.pay}} </span></li>
					<li>订单号 <i>-</i> <span>{{order.id}} </span></li>
						<li>商品数量 <i>-</i> <span>{{order.orderItems.length}} </span></li>
						<!--<li>下单人电话 <i>-</i> <span>15846545454</span></li>-->

						<li>配送地址 <i>-</i> <span>{{order.address.province}}-{{order.address.city}}-{{order.address.county}}-{{order.address.county}}</span></li>
						<li>总价 <i>-</i> <span>${{order.totalPrice}}</span></li>
					</ul>
				</div>

				<div class="checkout-right-basket animated wow slideInRight animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: slideInRight;">
					<a onclick="pay()" v-if="order.pay==false"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>去支付</a>
				</div>
				<div class="clearfix"> </div>
			</div>


			</div>
	</div>
<!-- //login -->
<!-- footer -->
<div th:include="footer::footer"></div>
<!-- //footer -->
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            orderid:localStorage.orderid,
            order:null
        },  methods: {
            gotodetails: function (id) {
                // `this` 在方法里指向当前 Vue 实例
                // alert('id: ' + id + '!');
                localStorage.orderid=id;
                window.location.href="/orderdetails"
            },
            tui: function (id) {
                $.ajax({
                    url: '/order/refund',
                    type: 'GET',
                    data:{
                        id:id
                    }
                }).done(function (res) {
                    console.log(res.obj)
                    if(res.code==1001){
                        alert("退款成功");
                        init();
                    }else{
                        alert("退款失败")
                    }
                    console.log("地址success");
                }).fail(function () {
                        console.log("error");
                    })
                    .always(function () {
                        console.log("complete");
                    });
            }
        }
    });

    init();
    function init(){
        $.ajax({
            url: '/order/find/id',
            type: 'GET',
			data:{
                id:localStorage.orderid
			}
        }).done(function (res) {
            console.log(res.obj)
            vm.order = res.obj
            console.log("ordersuccess");
        })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    }

    function  pay() {
        $.ajax({
            url: '/order/pay',
            type: 'GET',
            data:{
                id:localStorage.orderid
            }
        }).done(function (res) {
            console.log(res.obj)
            if(res.code==1001){
                alert("支付成功");
                init();
			}else{
                alert("支付失败")
			}
            console.log("地址success");
        })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    }

    function  tui() {
        $.ajax({
            url: '/order/refund',
            type: 'GET',
            data:{
                id:localStorage.orderid
            }
        }).done(function (res) {
            console.log(res.obj)
            if(res.code==1001){
                alert("退款成功");
                init();
            }else{
                alert("退款失败")
            }
            console.log("地址success");
        })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    }

</script>
</body>
</html>